<template>
    <div class="login-page">
        <div class="container" v-loading="loading">
            <n-form ref="formRef" :model="formData" :rules="rules">
                <n-form-item label="用户名" path="userCode">
                    <n-input v-model:value="formData.userCode" />
                </n-form-item>
                <n-form-item label="密码" path="password">
                    <n-input
                        v-model:value="formData.password"
                        @keyup.enter="onSubmit"
                    />
                </n-form-item>
                <n-form-item>
                    <n-button
                        type="primary"
                        block
                        data-test="submit"
                        :loading="loading"
                        @click="onSubmit"
                    >
                        登录
                    </n-button>
                </n-form-item>
            </n-form>
            <img :src="global.$config.logo" width="40" />
        </div>
    </div>
</template>
<script>
export default {
    name: "Login",
};
</script>
<script setup>
import { ref, inject } from "vue";
import md5 from "js-md5";
import { useSystemStore } from "@/store/system";
import { useUserStore } from "@/store/user";
import { useRouter, useRoute } from "vue-router";

const systemStore = useSystemStore();
const userStore = useUserStore();

const global = inject("global");
const router = useRouter();
const route = useRoute();

const formRef = ref(null);
const formData = ref({
    userCode: "",
    password: "",
});
const loading = ref(false);
const rules = ref({
    userCode: [
        {
            required: true,
            message: "请输入",
            trigger: ["input", "blur", "change"],
        },
    ],
    password: [
        {
            required: true,
            message: "请输入",
            trigger: ["input", "blur", "change"],
        },
    ],
});

const onSubmit = () => {
    formRef.value.validate((errors) => {
        if (!errors) {
            onSave();
        }
    });
};

const onSave = async () => {
    const { userCode, password } = formData.value;
    let _data = {
        userCode,
        password: md5(userCode + md5(password)),
    };
    systemStore.setLoading(true);
    // let res = await this.$api.CPLogin(_data);
    loading.value = true;
    let res = await global.$api.MockUserLogin(_data);
    loading.value = false;
    systemStore.setLoading(false);
    if (res.code === 0 || res.code === 200) {
        localStorage.setItem("Token", res.result);
        window.$message.success("登录成功", { duration: 2000 });
        // let res0 = await userStore.getUserInfo();
        const redirect = route.query.redirect || "";
        if (!redirect) {
            router.replace({
                path: "/redirect" + "/BasicLayout",
            });
            return;
        }
        let _url = decodeURIComponent(redirect);
        if (_url.indexOf("http") > -1) {
            window.location.href = _url;
        } else {
            router.replace({
                path: "/redirect" + _url,
            });
        }
    }
};
</script>
<style lang="less" scoped>
.login-page {
    .container {
        width: 500px;
        margin: 120px auto 0;
    }
}
</style>
